<template>
  <view>
    <view class="my-header">
      <view class="bg">
        <image src="/static/mybg.jpg" mode=""></image>
      </view>
      <view class="my-userInfo" @click="goUserInfo">
        <view class="my-userInfo-img">
          <image :src="userInfo.avatar" mode=""></image>
        </view>
        <view class="my-textInfo">
          <view class="name">
            {{userInfo.nickName}}
          </view>
        </view>
      </view>
    </view>

    <view class="my-scoreInfo">
      <view class="complete-box box">
        <view class="image-box">
          <view class="image">
            <image src="/static/wanchengdu.png" mode=""></image>
          </view>
        </view>
        <view class="textInfo">
          <view class="value">
            {{completion}}
          </view>
          <view class="box-title">
            完成度
            <!-- <uni-icons type="right" size="24rpx"></uni-icons> -->
          </view>
        </view>
      </view>
      <view class="divide">|</view>
      <view class="score-box box" @click="goIntegralDetail()">
        <view class="image-box">
          <view class="image">
            <image src="/static/xinyujifen.png" mode=""></image>
          </view>
        </view>
        <view class="textInfo">
          <view class="value">
            {{userInfo.integral | tofixed}}
          </view>
          <view class="box-title">
            积分
            <uni-icons type="right" size="24rpx"></uni-icons>
          </view>
        </view>
      </view>
      <view class="divide">|</view>
      <view class="rank-box box" @click='goRank()'>
        <view class="image-box">
          <view class="image">
            <image src="/static/paiming.png" mode=""></image>
          </view>
        </view>
        <view class="textInfo">
          <view class="value">
            {{myRank}}
          </view>
          <view class="box-title">
            排名
            <uni-icons type="right" size="24rpx"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <view class="container">
      <my-nav title='积分商城' url='/static/shangcheng2.png' ></my-nav>
      <my-nav title='每日答题' url='/static/datiqia.png' ></my-nav>
      <my-nav title='我的收藏' url='/static/shoucang2.png' ></my-nav>
      <my-nav title='我的地址' url='/static/dizhi.png'></my-nav>
      <my-nav title='我发布的' url='/static/fabu.png'></my-nav>
      <my-nav title='积分明细' url='/static/wj-mxjl.png' ></my-nav>
      <my-nav title='退出登录' url="/static/tuichu.png"></my-nav>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        myRank: 0,
        completion: 0
      };
    },
    onLoad() {
      this.getMyRank()
      this.getCompletion()
      this.getUserInfo()
    },
    onShow() {
      this.getMyRank()
      this.getCompletion()
      this.getUserInfo()
    },
    methods: {
      async getUserInfo() {
        const res = await uni.$http.get(`/users/users/${data.studentId}`)
        this.updateUserInfo(res.data.data)
      },
      async getMyRank() {
        const {
          data: {
            data
          }
        } = await uni.$http.get(`/users/users/myRank/${this.userInfo.studentId}`)
        this.myRank = data
      },
      async getCompletion() {
        const {
          data: {
            data
          }
        } = await uni.$http.get(`/users/tasks/completion/degree/${this.userInfo.studentId}`)
        this.completion = data
      },
      goUserInfo() {
        uni.navigateTo({
          url: '/subpkg/userInfo/userInfo'
        })
      },
      goIntegralDetail() {
        uni.navigateTo({
          url: '/subpkg/integralDetail/integralDetail'
        })
      },
      goRank() {
        uni.navigateTo({
          url: '/subpkg/rank/rank'
        })
      },
      out() {
        let that = this
        uni.showModal({
          content: '您确定退出登录吗？',
          confirmColor: '#c00000',
          success: function(res) {
            if (res.confirm) {
              that.okOut()
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
      async okOut() {
        await uni.$http.post('/users/users/logout')
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    },
    filters: {
      tofixed(num) {
        return Number(num).toFixed(2)
      }
    },
  }
</script>

<style lang="scss">
  .my-header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 550rpx;
    box-shadow: 0 0 20rpx #999;
    z-index: 100;

    .bg {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .my-userInfo {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
      margin-top: 120rpx;
      z-index: 100;

      .my-userInfo-img {
        width: 220rpx;
        height: 220rpx;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .my-textInfo {
        width: 100%;
        margin-top: 10rpx;

        .name {
          text-align: center;
          font-size: 32rpx;
          color: #555;
        }

      }
    }
  }

  .my-scoreInfo {
    position: relative;
    top: -168rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 190rpx;
    // background-color: #fff;
    // box-shadow: 0 0 15rpx #999;
    z-index: 200;

    .divide {
      width: 5rpx;
      color: #e9e9e9;
    }

    .box {
      display: flex;
      width: 200rpx;
      height: 180rpx;

      .image-box {
        width: 80rpx;
        height: 100%;
        text-align: center;

        .image {
          width: 64rpx;
          height: 64rpx;
          margin-top: 50rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }


      .textInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .value {
          font-size: 34rpx;
          margin-bottom: 16rpx;
        }

        .box-title {
          font-size: 24rpx;
        }
      }

    }
  }

  .container {
    width: 93%;
    margin: -123rpx auto;
    border-radius: 20rpx;
    overflow: hidden;
    background-color: #fff;
  }

  .btn {
    position: absolute;
    bottom: 80rpx;
    left: 20rpx;
    width: 95%;
    height: 90rpx;
    border-radius: 45rpx;
    background-color: #007aff;
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
  }
</style>